<template>
    <div class="nav_back">
        <van-nav-bar class="back" title="陪诊认证" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="content">
        <van-cell-group inset>
            <!-- <van-field v-model="value" /> -->
            <van-cell title='认证时间：' />
            <van-cell :title='value' />
            <van-cell title='姓名'  />
            <van-field v-model="name" placeholder="输入真实姓名" />
            <van-cell title='性别' />
            <van-field v-model="fieldValue" is-link readonly placeholder="选择性别" @click="showPicker = true" />
            <van-popup v-model:show="showPicker" destroy-on-close round position="bottom">
                <van-picker :model-value="pickerValue" :columns="columns" @cancel="showPicker = false"
                    @confirm="onConfirm" />
            </van-popup>
            <van-cell title='年龄' />
            <van-field v-model="age" placeholder="输入年龄" @input="age = age.replace(/[^0-9]/g, '')" />
            <van-cell title='联系方式' />
            <van-field v-model="phone" placeholder="请输入手机号" @input="phone = phone.replace(/[^0-9]/g, '')" />
            <van-cell title='服务地区' />
            <van-field style="margin-bottom:2vh;" v-model="address" placeholder="请输入地区" />
            <van-cell title="身份证号码" />
            <van-field v-model="IDcard" placeholder="身份证号码" @input="IDcard = IDcard.replace(/[^0-9]/g, '')" />
            <van-cell title='服务项目' />
            <van-field name="checkboxGroup">
                <template #input>
                    <van-checkbox-group v-model="groupChecked" direction="horizontal" shape="square">
                        <van-checkbox name="1">全程陪诊</van-checkbox>
                        <van-checkbox name="2">代办买药</van-checkbox>
                    </van-checkbox-group>
                </template>
            </van-field>
            <van-field name="checkboxGroup">
                <template #input>
                    <van-checkbox-group v-model="groupChecked" direction="horizontal" shape="square">
                        <van-checkbox name="3" shape="square">专享陪诊</van-checkbox>
                        <van-checkbox name="4">尊享VIP陪诊</van-checkbox>
                        <van-checkbox name="5" shape="square">专业陪护</van-checkbox>

                    </van-checkbox-group>
                </template>
            </van-field>
            <van-field name="checkboxGroup">
                <template #input>
                    <van-checkbox-group v-model="groupChecked" direction="horizontal" shape="square">
                        <van-checkbox name="6">12小时陪护</van-checkbox>
                        <van-checkbox name="7">半天陪诊</van-checkbox>
                        <van-checkbox name="8">诊前约号</van-checkbox>
                    </van-checkbox-group>
                </template>
            </van-field>
            <van-field name="checkboxGroup">
                <template #input>
                    <van-checkbox-group v-model="groupChecked" direction="horizontal" shape="square">
                        <van-checkbox name="9" shape="square">代办问诊</van-checkbox>
                    </van-checkbox-group>
                </template>
            </van-field>
            <van-cell title="自我介绍" />
            <van-field rows="4" autosize type="textarea" maxlength="60" show-word-limit />
            <van-button type="primary" @click="sub_up" style="margin: 0 auto;width:90vw;margin-top:1vh;" >提交</van-button>
        </van-cell-group>
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import http from '@/http';
import { jwtDecode } from "jwt-decode";
import { useRouter } from 'vue-router';
import { useUserStore } from '../stores/store';


const router = useRouter()
const onClickLeft = () =>{
    router.back()
    // router.push('/mypage')
}

const value = ref('');
const name = ref('')
const phone = ref('');
const age = ref('')
const IDcard = ref('');
const address = ref('')
const showPicker = ref(false);
const fieldValue = ref('');

const columns = [
    { text: '男', value: '男' },
    { text: '女', value: '女' },
]

let currentDates = new Date();
let year = currentDates.getFullYear();
let month = currentDates.getMonth() + 1;
let day = currentDates.getDate();
value.value = `${year}-${month}-${day}`;




const pickerValue = ref([])
const onConfirm = ({ selectedValues, selectedOptions }) => {
    showPicker.value = false;
    pickerValue.value = selectedValues;
    fieldValue.value = selectedOptions[0].text;
}

const groupChecked = ref([]);

const token = localStorage.getItem('token');
const decoded = jwtDecode(token);
const userStore = useUserStore();
// console.log("token>>>>>>>", decoded['username'])
// console.log("pinia>>>>>", userStore.getEscortAccount())
const sub_up = () => {
    console.log(fieldValue.value)
    console.log(address.value)
    console.log(groupChecked.value)
    console.log(userStore.escort_Account)
    const pinia_phone = userStore.getEscortAccount()
    const token_phone = decoded['username']
    
    if (pinia_phone == token_phone) {
        const data = {        
            e_name: name.value,
            e_phone: token_phone,
            address: address.value,
            e_card: IDcard.value,
            e_sex: fieldValue.value,
            e_age: age.value,
            groupChecked: groupChecked.value,
        }
        if (data.e_name == '') {
            console.log('姓名不能为空')
            alert('姓名不能为空')
        } else if (data.e_card == '') {
            console.log('身份证号不能为空')
            alert('身份证号不能为空')
        } else if (data.e_sex == '') {
            console.log('性别不能为空')
            alert('请选择性别')
        } else if (data.groupChecked == '') {
            console.log('服务项目不能为空')
            alert('服务项目不能为空，请选择服务项目')
        } 
        else{
        // 发送请求
            http.post('/escort/certification/', data).then(res => {
                if (res.status == 501) {
                    console.log('数据有误')
                }
                else if (res.status == 200) {
                    console.log(res.data)
                    router.push('/mypage')
                }
                else if (res.status == 404) {
                    console.log("未找到目前登录用户的对应数据", res.data)
                }
            })
        }

    }
    else {
        console.log('token与当前登录用户不匹配')
    }
}



</script>
<style>
.van-cell-group {
    margin: 0px;
}

.van-cell-group--inset {
    margin: 0px;
}

.van-cell {
    padding-left: 2vw;
}

.back {
    width: 100vw;
    margin-left: -5vw;
    margin-right: -5vw;
}

#app {
    background-color: rgb(247, 247, 247);
    padding: 5%;
    padding-top: 0px;
}

.content {

    background-color: rgb(255, 255, 255);
}
</style>